<template>
  <div class="time-count-down">{{hourString+":"+minuteString+":"+secondString}}</div>
  <!--<div v-if="isTraning">
	 <span class="trainclass-time-tips-num">{{hourString.substring(0,1)}}</span>
	 <span class="trainclass-time-tips-num">{{hourString.substring(hourString.length-1,hourString.length)}}</span>
  </div>-->
</template>

<script>
  export default {
    name: "TimeCountDown",
    prop: ["stopFlag"],
    data() {
      return {
        hour: '',
        minute: '',
        second: '',
        promiseTimer: null
      }
    },
    props: {
      remainTime: {    // 倒计时间总秒数
        default: ''
      },
      isTraning: {
        default: false
      }
    },
    mounted() {
      if (this.remainTime > 0) {
        this.hour = Math.floor((this.remainTime / 3600) % 24);
        this.minute = Math.floor((this.remainTime / 60) % 60);
        this.second = Math.floor(this.remainTime % 60);
        this.countDowm()
      }
    },
    methods: {
      countDowm() {
        var self = this;
        var useTime = 0;
        clearInterval(this.promiseTimer)
        this.promiseTimer = setInterval(function () {
          useTime++
          if (self.hour === 0) {
            if (self.minute !== 0 && self.second === 0) {
              self.second = 59
              self.minute -= 1
            } else if (self.minute === 0 && self.second === 0) {
              self.second = 0
              self.$emit('countDowmEnd', true);//倒计时结束
              clearInterval(self.promiseTimer)
            } else {
              self.second -= 1
            }
          } else {
            if (self.minute !== 0 && self.second === 0) {
              self.second = 59
              self.minute -= 1
            } else if (self.minute === 0 && self.second === 0) {
              self.hour -= 1
              self.minute = 59
              self.second = 59
            } else {
              self.second -= 1
            }
          }
          if (!self.$attrs.stopFlag) {
            self.$emit('getUseTime', useTime);
          }//使用了多少时间
        }, 1000)
      },
      formatNum(num) {
        return num < 10 ? '0' + num : '' + num
      }
    },
    computed: {
      hourString() {
        return this.formatNum(this.hour)
      },
      minuteString() {
        return this.formatNum(this.minute)
      },
      secondString() {
        return this.formatNum(this.second)
      },
    },
  }
</script>
<style lang="scss" scoped>
  .time-count-down {
    font-size: 32px;
    color: #ff2b2b;
    margin-top: 20px;
    margin-bottom: 10px;
  }
</style>
